<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/xiangqing.css">
    <link rel="stylesheet" href="../css/清除样式.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../font/iconfont.css">
</head>

<body>
    <!-- 头部 -->
    <header>

    </header>



    <div id="xq">
        <div id="xq-1">
            <div class="box" id="box">
                <div class="show">
                    <!-- <img src="https://img.fishfay.com/shopgoods/1/162130312/162130312-2-1/7274e72d0766a19507ef6e3483befb1d.jpg?x-image-process=image/resize,w_800,h_800"
                        alt=""> -->
                    <div class="mask"></div>
                </div>
                <div class="list">
                    <!-- <img class="active"
                        src="https://img.fishfay.com/shopgoods/1/162130312/162130312-2-1/7274e72d0766a19507ef6e3483befb1d.jpg?x-image-process=image/resize,w_220,h_220"
                        data-show="https://img.fishfay.com/shopgoods/1/162130312/162130312-2-1/7274e72d0766a19507ef6e3483befb1d.jpg?x-image-process=image/resize,w_800,h_800"
                        data-enlarge="https://img.fishfay.com/shopgoods/1/162130312/162130312-2-1/7274e72d0766a19507ef6e3483befb1d.jpg?x-image-process=image/resize,w_800,h_800"
                        alt="">
                    <img src="https://img.fishfay.com/shopgoods/1/162130312/162130312-2-2/4159071aa0f66a7d7c43cac13afc8d5f.jpg?x-image-process=image/resize,w_220,h_220"
                        data-show="https://img.fishfay.com/shopgoods/1/162130312/162130312-2-2/4159071aa0f66a7d7c43cac13afc8d5f.jpg?x-image-process=image/resize,w_800,h_800"
                        data-enlarge="https://img.fishfay.com/shopgoods/1/162130312/162130312-2-2/4159071aa0f66a7d7c43cac13afc8d5f.jpg?x-image-process=image/resize,w_800,h_800"
                        alt="">

                    <img src="https://img.fishfay.com/shopgoods/1/162130312/162130312-2-3/2987dd2385d55ce838fb1a2919813d10.jpg?x-image-process=image/resize,w_220,h_220"
                        data-show="https://img.fishfay.com/shopgoods/1/162130312/162130312-2-3/2987dd2385d55ce838fb1a2919813d10.jpg?x-image-process=image/resize,w_800,h_800"
                        data-enlarge="https://img.fishfay.com/shopgoods/1/162130312/162130312-2-3/2987dd2385d55ce838fb1a2919813d10.jpg?x-image-process=image/resize,w_800,h_800"
                        alt="">

                    <img src="https://img.fishfay.com/shopgoods/1/162130312/162130312-2-4/e41062d5ce29fd9ee4a92f264a45d0e6.jpg?x-image-process=image/resize,w_220,h_220"
                        data-show="https://img.fishfay.com/shopgoods/1/162130312/162130312-2-4/e41062d5ce29fd9ee4a92f264a45d0e6.jpg?x-image-process=image/resize,w_800,h_800"
                        data-enlarge="https://img.fishfay.com/shopgoods/1/162130312/162130312-2-4/e41062d5ce29fd9ee4a92f264a45d0e6.jpg?x-image-process=image/resize,w_800,h_800"
                        alt="">

                    <img src="https://img.fishfay.com/shopgoods/1/162130312/162130312-2-5/a5b6323185abd52fbfe0751b86ae7636.jpg?x-image-process=image/resize,w_220,h_220"
                        data-show="https://img.fishfay.com/shopgoods/1/162130312/162130312-2-5/a5b6323185abd52fbfe0751b86ae7636.jpg?x-image-process=image/resize,w_800,h_800"
                        data-enlarge="https://img.fishfay.com/shopgoods/1/162130312/162130312-2-5/a5b6323185abd52fbfe0751b86ae7636.jpg?x-image-process=image/resize,w_800,h_800"
                        alt=""> -->

                </div>
                <div class="enlarge">
                    <!-- <img src="https://img.fishfay.com/shopgoods/1/162130312/162130312-2-1/7274e72d0766a19507ef6e3483befb1d.jpg?x-image-process=image/resize,w_800,h_800"
                        alt=""> -->
                </div>
            </div>
            <div id="xq-2">
                <div id="xq-2-1">
                    <p>女紧身长裤</p>
                    <!-- <h3>安踏女库紧身长裤2021新款</h3> -->
                    <p class="kh">款号：162130312</p>
                    <p class="jg">￥499.00</p>
                </div>
                <div id="xq-2-2">
                    <ul>
                        <li>
                            <img src="https://img.fishfay.com/shopgoods/1/162130312/162130312-2-1/7274e72d0766a19507ef6e3483befb1d.jpg?x-image-process=image/resize,w_80,h_80"
                                alt="">
                        </li>
                    </ul>
                    <p class="cm">
                        查看尺码对照表
                        <i></i>
                    </p>
                    <div id="xq-2-3">
                        <div class="infos-cell">
                            <div class="xq-2-3-2 f1">
                                <span>尺码:</span>
                                <input id="input1" type="text" placeholder="请选择尺码 " readonly="readonly">
                                <i class="i1"></i>
                            </div>
                            <i class="i2"></i>
                            <div class="xq-2-3-3 f1">
                                <span>数量:</span>
                                <input id="input1" type="text" placeholder="购买数量" readonly="readonly">
                                <i class="i1"></i>
                            </div>
                        </div>
                        <div class="xq-2-4">
                            <div class="xq-2-4-1">
                                <span>领取优惠券</span>
                                <i class="i1"></i>
                            </div>
                        </div>
                        <div id="xq-3">
                            <a href="javascript:">加入购物车</a>
                            <a href="javascript:">立即购买</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 商品细节 -->
        <div id="xj">
            <div class="xj-l">
                <p>
                    <span>商品细节</span>
                </p>
                <i></i>
            </div>
            <div class="xj-r">
                <p></p>
            </div>
        </div>
        <!-- 细节 -->
        <div id="xj-2">
            <img
                src="https://img.fishfay.com/shopgoods/1/162130312/bd-162130312-1/94f4373cb652ca41469fbd8f08aa8096.jpg">
            <img
                src="https://img.fishfay.com/shopgoods/1/162130312/bd-162130312-2/66d5d4972a6f8a169b8e90dc6bfe977b.jpg">
            <img
                src="https://img.fishfay.com/shopgoods/1/162130312/bd-162130312-3/87ba6938891e68b26bb09fe0354305ab.jpg">
            <img
                src="https://img.fishfay.com/shopgoods/1/162130312/bd-162130312-4/2b0dc3a2aef0101ba653841236625c59.jpg">
        </div>
    </div>

    <!-- 底部 -->
    <footer>

    </footer>
</body>

</html>
<script src="../js/jQuery.js"></script>
<script src="../js/index.js"></script>
<script src="../js/enlarge.js"></script>
<script>
    /*
     放大镜
   */

    // 实现放大镜

    

    // 获取id

    let samll = document.querySelector('.list');
    let big = document.querySelector('.show');
    let cd = document.querySelector('.mask');
    let mz = document.querySelector('#xq-2-1');
    let moren = document.querySelector('.enlarge');


    // 入口函数

    $(function () {
        getData()
    })

    function getData() {
        console.log(location.search.split('=')[1]);
        $.get('../goodsAndShoppingCart/getGoodsInfo.php', {
            goodsId: location.search.split('=')[1]
        }, function (data) {
            console.log(data);
            let a = JSON.parse(data)
            //console.log(a);
            let str = ''
            let str1 = ''
            let str2 = ''
            let str3 = ''
            let str4 = ''
            str = `
          <img class="active" src="${a.beiyong1}" data-show="${a.beiyong6}" data-enlarge="${a.beiyong6}">
          <img class="active" src="${a.beiyong2}" data-show="${a.beiyong7}" data-enlarge="${a.beiyong7}">
          <img class="active" src="${a.beiyong3}" data-show="${a.beiyong8}" data-enlarge="${a.beiyong8}">
          <img class="active" src="${a.beiyong4}" data-show="${a.beiyong9}" data-enlarge="${a.beiyong9}">
          <img class="active" src="${a.beiyong5}" data-show="${a.beiyong10}" data-enlarge="${a.beiyong10}">
          `
            str1 = `
        <img src="${a.beiyong6}">
        <div class="mask"></div>
        `

            str2 = `
        <img src="${a.beiyong6}">
        `
            str3 = `
        <h3>${a.goodsName}</h3>
        `
            str4 = `
                    <img src="${a.beiyong6}">
                    `
            samll.innerHTML = str;
            big.innerHTML = str1;
            cd.innerHTML = str2;
            mz.innerHTML = str3;
            moren.innerHTML = str4;
            const en = new Enlarge('#box')
        }
        )
    }

</script>